import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import NavHeader from "../../components/NavHeader";
import styles from "./index.module.css";
const Bmap = window.BMapGL;
export default function Map(porps) {
  const navigate = useNavigate();
  useEffect((res) => {
    const map = new Bmap.Map("map");
    initMap(map);
    editMapLable(map, [1, 2, 3, 4]);
  }, []);

  return (
    <div>
      <NavHeader title="地图找房" />
      <div
        id="map"
        style={{ height: window.screen.height - 45, width: "100%" }}
      ></div>
    </div>
  );
}
function initMap(map) {
  const point = new Bmap.Point(104.195397, 35.86166);
  map.centerAndZoom(point, 11);
  map.enableScrollWheelZoom(true);
  var scaleCtrl = new Bmap.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new Bmap.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  map.addOverlay(new Bmap.Marker(point));
}
function editMapLable(map, data) {
  if (data.length >= 5) return;
  for (let item in data) {
    const point = new Bmap.Point(
      104.195397 + Math.random(0, 1) / item,
      35.86166 + Math.random(0, 1) / item
    );

    var label = new Bmap.Label("", {
      // 创建文本标注
      position: point, // 设置标注的地理位置
      offset: new Bmap.Size(-40, -40), // 设置标注的偏移量
    });
    label.setContent(`
    <div style="width:80px;height:80px;border-radius:50%;background:#108ee9;color:#fff;text-align:center;" >
    <p>北京${item}</p>
    <p>${100 + parseInt(Math.random(0, 1) * 100)}套</p>
    </div>`);
    label.id = item;
    label.setStyle({
      // 设置label的样式
      color: "#000",
      fontSize: "16px",
      border: "none",
      textAligin: "center",
      background: "none",
      lineHeight: "30px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
    });
    label.addEventListener("click", () => {
      lookChildCityList(map, point);
    });
    map.addOverlay(label);
  }
}

function lookChildCityList(map, point) {
  // 放大地图
  map.centerAndZoom(point, 15);
  // 清除覆盖物信息(异步解决)
  setTimeout(() => {
    map.clearOverlays();
  }, 0);
}

